<template>
    <el-button type="primary" @click="dialogSoftVisible = true">
        打开软件对话框
    </el-button>
    <el-button type="primary" @click="dialogVisible = true">
        Open a draggable Dialog
    </el-button>
    <el-button type="primary" @click="dialogOverflowVisible = true">
        Open a overflow draggable Dialog
    </el-button>
    <el-button type="primary" @click="addOrUpdate(rowData)">打开弹窗</el-button>

    <el-dialog v-model="dialogVisible" :title="dialogName()" width="500" draggable>
        <!-- <span>It's a draggable Dialog</span> -->
        <el-form ref="dataFormRef" :model="dataForm" abel-width="100px">
            <el-form-item prop="mobile" label="手机号码">
                <el-input v-model="dataForm.mobile" placeholder="手机号码"></el-input>
            </el-form-item>
            <el-form-item prop="certNo" label="证件号码">
                <el-input v-model="dataForm.certNo" placeholder="证件号码"></el-input>
            </el-form-item>
            <el-form-item prop="validNum" label="有效次数">
                <el-input v-model="dataForm.validNum" placeholder="有效次数"></el-input>
            </el-form-item>
            <el-form-item prop="validTime" label="有效期限">
                <el-date-picker v-model="dataForm.validTime" type="date" value-format="YYYY-MM-DD" placeholder="选择一个日期" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button @click="resetForm(dataFormRef)">重置</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogSoftVisible" :title="dialogName()" width="500" draggable>
        <el-form ref="softFormRef" :model="softForm" abel-width="100px">
            <el-form-item prop="softName" label="软件名称">
                <el-input v-model="softForm.softName" placeholder="软件名称"></el-input>
            </el-form-item>
            <!-- softVersion -->
            <el-form-item prop="softVersion" label="软件版本">
                <el-input v-model="softForm.softVersion" placeholder="软件版本"></el-input>
            </el-form-item>
            <!-- gitUrl -->
            <el-form-item prop="gitUrl" label="git地址">
                <el-input v-model="softForm.gitUrl" placeholder="git地址"></el-input>
            </el-form-item>
            <!-- language -->
            <el-form-item prop="language" label="开发语言">
                <el-input v-model="softForm.language" placeholder="开发语言"></el-input>
            </el-form-item>

            <!-- status -->
            <!-- <el-form-item prop="status" label="状态">
                <el-input v-model="softForm.status" placeholder="状态"></el-input>
            </el-form-item> -->
            <!-- timeRange -->
            <!-- <el-form-item prop="timeRange" label="时间范围">
                <el-input v-model="softForm.timeRange" placeholder="时间范围"></el-input>
            </el-form-item> -->

            <!-- status -->
            <el-form-item prop="status" label="状态">
                <el-select v-model="softForm.status" placeholder="请选择">
                    <el-option key="0" value="进行中">
                        进行中
                    </el-option>
                    <el-option key="1" value="已完成">
                        已完成
                    </el-option>
                    <el-option key="2" value="失败">
                        失败
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- timeRange -->
            <el-form-item prop="timeRange" label="时间范围">
                <!-- v-model:value (antd vue) 加value会导致内容选中不了！！ -->
                <el-date-picker v-model="softForm.timeRange" type="datetimerange" start-placeholder="开始日期"
                    end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                    time-format="A hh:mm:ss" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogSoftVisible = false">取消</el-button>
                <el-button @click="resetForm(softFormRef)">重置</el-button>
                <el-button type="primary" @click="dialogSoftVisible = false">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogOverflowVisible" title="Tips" width="500" draggable overflow>
        <span>It's a overflow draggable Dialog</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogOverflowVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogOverflowVisible = false">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 这个没有标题，不知道为啥？ -->
    <el-dialog v-model="visible" :titile="dialogName()" :close-on-click-modal="false" width="25%">
        <!-- :rules="dataRules" l -->
        <el-form ref="dataFormRef" :model="dataForm" abel-width="100px">
            <el-form-item prop="mobile" label="手机号码">
                <el-input v-model="dataForm.mobile" placeholder="手机号码"></el-input>
            </el-form-item>
            <el-form-item prop="certNo" label="证件号码">
                <el-input v-model="dataForm.certNo" placeholder="证件号码"></el-input>
            </el-form-item>
            <el-form-item prop="validNum" label="有效次数">
                <el-input v-model="dataForm.validNum" placeholder="有效次数"></el-input>
            </el-form-item>
            <el-form-item prop="validTime" label="有效期限">
                <el-date-picker v-model="dataForm.validTime" type="date" value-format="YYYY-MM-DD" placeholder="选择一个日期" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="closeDialog()">取消</el-button>
            <el-button type="primary" @click="submitHandle()">确定</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { nextTick } from "vue";
import { reactive, ref } from "vue";
import type { FormInstance } from 'element-plus'

const dataForm = reactive<{
    visitorUserId: string,
    mobile: string,
    certNo: string,
    validNum: string,
    validTime: string
}>({
    visitorUserId: '',
    mobile: '',
    certNo: '',
    validNum: '',
    validTime: ''
})


const softForm = reactive<{
    softName: string,
    softVersion: string,
    gitUrl: string,
    language: string,
    status: string,
    timeRange: string,
}>({
    softName: '',
    softVersion: '',
    gitUrl: '',
    language: '',
    status: '',
    timeRange: '',
})

const dataFormRef = ref<FormInstance>()
const softFormRef = ref<FormInstance>()
const visible = ref(false)

// 在nextTick里面赋值
const addOrUpdate = (row?: any) => {
    // 弹框visible先为true
    visible.value = true
    nextTick(() => {
        dataForm.visitorUserId = row.visitorUserId
        dataForm.mobile = row.mobile
        dataForm.certNo = row.certNo
        dataForm.validNum = row.validNum
        dataForm.validTime = row.validTime
    })
}

// 关闭弹框
const closeDialog = () => {
    dataFormRef.value?.resetFields()
    dataForm.visitorUserId = ''
    // console.log("dataFormRef.value", dataFormRef.value);

    // visible.value = false
}

const submitHandle = () => {
    dataFormRef.value?.validate((valid: boolean) => {
        if (!valid) {
            return
        }
        console.log("dataForm", dataForm);

    })
}

const dialogName = () => {
    return !dataForm.visitorUserId ? '新增' : '修改'
}


const rowData = reactive({
    visitorUserId: '0001',
    mobile: '1234567945',
    certNo: '64461616316316',
    validNum: '5',
    validTime: '',
})

const dialogVisible = ref(false)
const dialogSoftVisible = ref(false)
const dialogOverflowVisible = ref(false)

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    //   dataFormRef.value?.resetFields()
    // 重置后
    console.log('重置后 formEl: ', formEl);
    console.log('重置后 formRef: ', dataFormRef);
}

</script>

<style scoped></style>